import React, { Component } from 'react';
import "./setEmp.scss";
import NavHeader from "./../../components/navHeader/navHeader";
import Pay from "./../../components/pay/pay";
import { getEmpDataForSet, setEmpWorkStatus, setFreeTime } from "./../../api/indexApi";
import { Select, Slider } from 'antd';
import alertMessage from "./../../utils/alertMessage";

const Option = Select.Option;


class SetEmp extends Component {
    constructor(props) {
        super(props);
        this.state = {
            voiceEnabled: false,
            empList: [],
            audioDevice: "",
            audioOptions: [],
            allAudioOptions: [],
            storeId: "",
            storeInfo: {
                storeName: "",
                logo: "",
                endTime: ""
            },
            showFreeTime: false,
            nowFreeTime: 20,//呼叫空闲时间
            showPay: false,
            voiceSpeed: 100,
            offlineVoiceVolum: 100,
            callType: "empCode",//设置呼叫模式员工工号或员工名字
            sayOtherInfo: false,
            isAlertInfo: false,
            isCallTwice: false,
            callFirst: false
        };
        this.changeEmpWorkStatus = this.changeEmpWorkStatus.bind(this);
        this.getEmpData = this.getEmpData.bind(this);
        this.handleChange = this.handleChange.bind(this);
        this.selAudio = this.selAudio.bind(this);
    }
    render() {
        let { empList, storeInfo, showFreeTime, showPay, storeId, nowFreeTime, callType, voiceSpeed, sayOtherInfo, isAlertInfo, isCallTwice, callFirst, audioOptions, audioDevice, voiceEnabled, offlineVoiceVolum } = this.state;
        return (
            <div className="set-emp">
                <NavHeader showPay={() => this.setState({ showPay: true })} showSetFreeTime={true} showFreeTime={() => this.setState({ showFreeTime: true })} storeInfo={storeInfo} history={this.props.history} />
                <div className="list-warp">
                    <table className="table-tit" width="100%">
                        <thead>
                            <tr width="100%">
                                <th width="33.33333%">员工姓名</th>
                                <th width="33.33333%">员工状态</th>
                                <th width="33.33333%">员工工号</th>
                                {/* <th width="25%">操作</th> */}
                            </tr>
                        </thead>
                    </table>
                    <div className="cont">
                        <table className="table-cont" width="100%">
                            <tbody>
                                {
                                    empList.map((item, index) => {
                                        return (
                                            <tr width="100%" key={index}>
                                                <td width="33.33333%">{item.name}</td>
                                                <td width="33.33333%" className={item.work ? "change-status" : "change-status out-work"} onClick={() => this.changeEmpWorkStatus(item)}>{item.work ? "上班" : "下班"}</td>
                                                <td width="33.33333%">{item.code}</td>
                                                {/* <td width="25%" onClick={() => this.changeEmpWorkStatus(item)} className="change-status">{!item.work ? "上班" : "下班"}</td> */}
                                            </tr>
                                        );
                                    })
                                }
                            </tbody>
                        </table>
                    </div>
                </div>
                {
                    showFreeTime ? (
                        <div className="free-time-mask" onClick={() => this.setState({ showFreeTime: false })}>
                            <div className="free-time-wrap" onClick={(e) => e.stopPropagation()}>
                                <div className="tit">请选择呼叫自动空闲时间</div>
                                <Select defaultValue={nowFreeTime + ""} firstActiveValue={nowFreeTime + ""} defaultActiveFirstOption={false} value={nowFreeTime + ""} style={{ width: 120 }} onChange={(value) => this.handleChange(value, 'nowFreeTime')}>
                                    <Option value="20">20s</Option>
                                    <Option value="30">30s</Option>
                                    <Option value="40">40s</Option>
                                    <Option value="50">50s</Option>
                                    <Option value="60">60s</Option>
                                </Select>
                                <div className="tit">请选择语音播放方式</div>
                                <Select defaultValue={callType + ""} firstActiveValue={callType + ""} defaultActiveFirstOption={false} value={callType + ""} style={{ width: 120 }} onChange={(value) => this.handleChange(value, 'callType')}>
                                    <Option value="empCode">员工工号</Option>
                                    <Option value="empName">员工姓名</Option>
                                    <Option value="netManager">呼叫网管</Option>
                                </Select>
                                <div className="tit">是否过滤座位号中的文字和字符</div>
                                <Select defaultValue={sayOtherInfo + ""} firstActiveValue={sayOtherInfo + ""} defaultActiveFirstOption={false} value={sayOtherInfo + ""} style={{ width: 120 }} onChange={(value) => this.handleChange(value, 'sayOtherInfo')}>
                                    <Option value="false">过滤</Option>
                                    <Option value="true">保留</Option>
                                </Select>
                                <div className="tit">是否显示呼叫弹窗</div>
                                <Select defaultValue={isAlertInfo + ""} firstActiveValue={isAlertInfo + ""} defaultActiveFirstOption={false} value={isAlertInfo + ""} style={{ width: 120 }} onChange={(value) => this.handleChange(value, 'isAlertInfo')}>
                                    <Option value="false">关闭</Option>
                                    <Option value="true">开启</Option>
                                </Select>
                                <div className="tit">是否呼叫两次座位号</div>
                                <Select defaultValue={isCallTwice + ""} firstActiveValue={isCallTwice + ""} defaultActiveFirstOption={false} value={isCallTwice + ""} style={{ width: 120 }} onChange={(value) => this.handleChange(value, 'isCallTwice')}>
                                    <Option value="false">关闭</Option>
                                    <Option value="true">开启</Option>
                                </Select>
                                <div className="tit">先播放座位号再播放工号</div>
                                <Select defaultValue={callFirst + ""} firstActiveValue={callFirst + ""} defaultActiveFirstOption={false} value={callFirst + ""} style={{ width: 120 }} onChange={(value) => this.handleChange(value, 'callFirst')}>
                                    <Option value="false">否</Option>
                                    <Option value="true">是</Option>
                                </Select>
                                {
                                    voiceEnabled ? (
                                        <React.Fragment>
                                            <div className="tit">音频输出设备选择</div>
                                            <Select defaultValue="" defaultActiveFirstOption={false} value={audioDevice + ""} style={{ width: "100%" }} onChange={(value) => this.handleChange(value, 'audioDevice')}>
                                                {
                                                    audioOptions.map((item, index) => {
                                                        return (
                                                            <Option value={item.label} key={index}>{item.label}</Option>
                                                        );
                                                    })
                                                }
                                            </Select>
                                        </React.Fragment>

                                    ) : ("")
                                }

                                <div className="tit">请设置语音快慢度</div>
                                <Slider defaultValue={Number(voiceSpeed)} onChange={(value) => this.handleChange(value, 'voiceSpeed')} />
                                {/*  */}
                                <div className="tit">下机播报音量大小</div>
                                <Slider defaultValue={Number(offlineVoiceVolum)} onChange={(value) => this.handleChange(value, 'offlineVoiceVolum')} />
                                {/*  */}
                                <div><button onClick={() => this.changeFreeTime()}>确定</button></div>
                            </div>
                        </div>
                    ) : ("")
                }
                {
                    showPay ? (
                        <Pay hidePay={() => this.setState({ showPay: false })} storeId={storeId} />
                    ) : ("")
                }
            </div>
        );
    }
    componentDidMount() {
        let storeId = localStorage.getItem("storeId");
        let callType = localStorage.getItem("callType") ? localStorage.getItem("callType") : "empCode";
        let voiceSpeed = localStorage.getItem("voiceSpeed") ? localStorage.getItem("voiceSpeed") : 100;
        let offlineVoiceVolum = localStorage.getItem("offlineVoiceVolum") ? localStorage.getItem("offlineVoiceVolum") : 100;
        let sayOtherInfo = localStorage.getItem("sayOtherInfo") ? JSON.parse(localStorage.getItem("sayOtherInfo")) : false;
        let isAlertInfo = localStorage.getItem("isAlertInfo") ? JSON.parse(localStorage.getItem("isAlertInfo")) : false;
        let isCallTwice = localStorage.getItem("isCallTwice") ? JSON.parse(localStorage.getItem("isCallTwice")) : false;
        let callFirst = localStorage.getItem("callFirst") ? JSON.parse(localStorage.getItem("callFirst")) : false;
        const audioDevice = localStorage.getItem("audioDevice") ? localStorage.getItem("audioDevice") : "";
        let storeInfo;
        if (localStorage.getItem("storeInfo")) {
            storeInfo = JSON.parse(localStorage.getItem("storeInfo"));
        } else {
            this.props.history.push("/");
        }
        this.setState({
            storeId,
            storeInfo,
            callType,
            voiceSpeed,
            offlineVoiceVolum,
            sayOtherInfo,
            isAlertInfo,
            isCallTwice,
            callFirst,
            audioDevice
        });
        this.getEmpData(storeId);
        // 

        try {
            let voiceEnabled = JSON.parse(localStorage.getItem("voiceEnabled"));
            this.setState({
                voiceEnabled
            });
            if (voiceEnabled === 1) {
                this.selAudio();
            }
        } catch (error) {
            console.log(error);
        }
        // 
    }
    selAudio() {
        navigator.mediaDevices.enumerateDevices().then(res => {
            const audioDevices = res.filter((device) => device.kind === "audiooutput");
            console.log("navigator.mediaDevices", audioDevices);
            let groupKey = {};
            audioDevices.forEach(it => {
                groupKey[it.groupId] = it;
            });
            for (let k in groupKey) {
                audioDevices.forEach(it => {
                    if (it.groupId === k && (it.deviceId === "" || it.deviceId === "default")) {
                        groupKey[k] = it;
                    }
                });
            }
            let finalDevices = [];
            for (let k in groupKey) {
                finalDevices.push(groupKey[k]);
            }
            this.setState({
                audioOptions: finalDevices,
                allAudioOptions: audioDevices,
            });
        });
    }
    async changeFreeTime() {
        let { storeId, nowFreeTime, callType, voiceSpeed, sayOtherInfo, isAlertInfo, isCallTwice, callFirst, audioDevice, offlineVoiceVolum } = this.state;
        try {
            localStorage.setItem("callType", callType);
            localStorage.setItem("voiceSpeed", voiceSpeed);
            localStorage.setItem("offlineVoiceVolum", offlineVoiceVolum);
            localStorage.setItem("sayOtherInfo", sayOtherInfo);
            localStorage.setItem("isAlertInfo", isAlertInfo);
            localStorage.setItem("isCallTwice", isCallTwice);
            localStorage.setItem("callFirst", callFirst);
            if (audioDevice) {
                localStorage.setItem("audioDevice", audioDevice);
            }
            let res = await setFreeTime(storeId, nowFreeTime);
            console.log(res);
            if (res.data.result.code === 200) {
                alertMessage.success(res.data.result.msg);
                this.setState({
                    showFreeTime: false
                });
                this.getEmpData(this.state.storeId);
            }
        } catch (error) {
            console.log(error);
        }
    }
    async getEmpData(storeId) {
        try {
            let res = await getEmpDataForSet(storeId);
            this.setState({
                empList: res.data.data,
                nowFreeTime: res.data.second
            });
        } catch (error) {
            console.log(error);
        }
    }
    handleChange(value, type) {
        console.log(value);
        this.setState({
            [type]: value
        });
    }
    async changeEmpWorkStatus(item) {
        try {
            let status = item.work ? false : true;
            let res = await setEmpWorkStatus(item.id, status);
            if (res.status === 200) {
                this.getEmpData(this.state.storeId);
            }
        } catch (error) {
            console.log(error);
        }
    }
    componentWillUnmount() {
        this.setState = (state, callback) => {
            return;
        };
    }
}

export default SetEmp;